<template>
    <div class="home">
        <div class="my-shop" ref="myshop">
            <div class="my-head">
                <div class="shop-logo">
                    <img src="../assets/logo.png" alt="" />
                </div>
                <div class="my-order" @click="openMyOrder">
                    <div class="my-order-icon">
                        <i class="fa fa-file-text-o fa-icon"></i>
                    </div>
                    <div class="my-order-btn">我的订单</div>
                </div>
            </div>
            <div class="shop-info">
                <div class="shop-info-l">
                    <p class="title">幸福上品</p>
                </div>
                <div class="shop-info-r">
                    <p class="table">桌号01</p>
                </div>
            </div>
        </div>

        <div class="classify">
            <div class="classify-content">
                <div class="classify-l" ref="l_list">
                    <ul>
                        <li
                            v-for="(list, index) in left_data"
                            :key="index"
                            :class="currentIndex === index ? 'active' : ''"
                            @click="goScroll(index)"
                        >
                            {{ list.title }}<span>{{ list.subtitle }}</span>
                        </li>
                    </ul>
                </div>
                <div class="classify-r" ref="r_list">
                    <ul>
                        <li
                            class="classify-r-list"
                            v-for="(list, index) in right_data"
                            :key="index"
                        >
                            <div class="shop-title">
                                {{ list.name }}
                            </div>
                            <div
                                class="shop-info"
                                v-for="(item, index) in list.foods"
                                :key="index"
                            >
                                <div class="shop-info-l">
                                    <img :src="item.icon" alt="" />
                                </div>
                                <div class="shop-info-r">
                                    <div class="shop-info-r-name">
                                        <p>{{ item.name }}</p>
                                        <span
                                            v-if="item.productTag"
                                            :class="
                                                item.productTag == '鲜'
                                                    ? 'activeGreen'
                                                    : item.productTag ==
                                                      '清新冰镇'
                                                    ? 'activeGrey'
                                                    : item.productTag ==
                                                      '甘醇冰镇'
                                                    ? 'activeGrey'
                                                    : item.productTag ==
                                                      '溢香冰镇'
                                                    ? 'activeGrey'
                                                    : ''
                                            "
                                            >{{ item.productTag }}</span
                                        >
                                    </div>
                                    <div class="shop-info-r-price">
                                        <p class="shop-price">
                                            ￥{{ item.price }}
                                        </p>
                                        <div class="price-btn">
                                            <i
                                                class="
                                                    plus-btn
                                                    fa fa-minus-square-o
                                                    huise
                                                "
                                                v-show="item.count > 0"
                                                @click="item.count--"
                                            ></i>
                                            <span
                                                class="price-content"
                                                v-show="item.count > 0"
                                                >{{ item.count }}</span
                                            >
                                            <i
                                                @click="item.count++"
                                                class="
                                                    plus-btn
                                                    fa fa-plus-square-o
                                                "
                                            ></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="my-cart" v-if="isMycart">
            <div class="my-cart-bg" @click="isMycart = false"></div>
            <div class="shop-info">
                <div
                    class="shop-content"
                    v-for="(item, index) in cartData"
                    :key="index"
                >
                    <div class="shop-info-l">
                        <img :src="item.icon" alt="" />
                    </div>
                    <div class="shop-info-r">
                        <div class="shop-info-r-name">
                            <p>{{ item.name }}</p>
                            <span
                                v-if="item.productTag"
                                :class="
                                    item.productTag == '鲜'
                                        ? 'activeGreen'
                                        : item.productTag == '清新冰镇'
                                        ? 'activeGrey'
                                        : item.productTag == '甘醇冰镇'
                                        ? 'activeGrey'
                                        : item.productTag == '溢香冰镇'
                                        ? 'activeGrey'
                                        : ''
                                "
                                >{{ item.productTag }}</span
                            >
                        </div>
                        <div class="shop-info-r-price">
                            <p class="shop-price">￥{{ item.price }}</p>
                            <div class="price-btn">
                                <i
                                    class="plus-btn fa fa-minus-square-o huise"
                                    @click="item.count--"
                                ></i>
                                <span class="price-content">{{
                                    item.count
                                }}</span>
                                <i
                                    @click="item.count++"
                                    class="plus-btn fa fa-plus-square-o"
                                ></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="kong" v-if="cartData.length <= 0">
                    <van-empty description="空" />
                </div>
            </div>
        </div>
        <div class="total">
            <div class="total-l">
                <div class="cart" @click="isMycart = true">
                    <div class="tip">{{ total }}</div>
                    <i class="fa fa-shopping-cart cart-icon"></i>
                </div>
                <div class="total-info">
                    <p class="total-t">合计</p>
                    <p class="total-price">￥{{ totalPrice }}</p>
                </div>
            </div>
            <div class="total-r" @click="openConfirmOrder">
                <button>选好了</button>
            </div>
        </div>
        <popup v-if="$store.state.showPopup" :data="popupData"></popup>
        <div class="popupbtn" @click="showPopup" v-if="popupbtn">
            <i class="fa fa-hourglass-2 fa-spin"></i>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import http from "../api/http";
import { Toast } from "vant";
import data from "../assets/js/data.json";
import Moment from "moment";
import ps, { stringify } from "qs";
import popup from "../components/Popup.vue";
export default {
    name: "Home",
    data() {
        return {
            isTotal: false, //是否显示合计
            allHeight: [], //右侧高度
            rightBScroll: null,
            leftBScroll: null,
            scrollY: "", //右侧滚动距离
            specsBorder: -1,
            sumbitData: [],
            left_data: [],
            right_data: [],
            showBScroll: null,
            popupbtn: false, //弹框按钮
            popupData: {}, //弹框数据
            isMycart: false, //购物车弹框
            totalPrice: 0,
        };
    },
    components: {
        popup,
    },
    methods: {
        totalPost() {
            let items = [];
            this.right_data.forEach((item) => {
                item.foods.forEach((v) => {
                    if (v.count >= 1) {
                        items.push({
                            productId: v.id,
                            productQuantity: v.count, //购买数量
                            productSpecs: v.specs,
                        });
                    }
                });
            });
            console.log(items);
            if (items.length > 0) {
                items = JSON.stringify(items);
                let data = {
                    name: "幸福上品",
                    phone: "18868822111",
                    address: "桌号01",
                    openid: "ew3euwhd7sjw9diwkq", //用户的微信openid
                    items: items,
                };
                http.post(
                    "/tophappiness/sell/buyer/order/createTotalPrice",
                    ps.stringify(data)
                ).then((res) => {
                    this.totalPrice = res.orderAmount;
                });
            } else {
                this.totalPrice = 0;
            }
        },
        showPopup() {
            this.$store.state.showPopup = !this.$store.state.showPopup;
        },
        openMyOrder() {
            this.$router.push("/myorder");
        },
        //选好了
        openConfirmOrder() {
            let data = {};
            let list = [];
            let type = ""; //判断是加菜还是点菜  1和2
            this.$store.state.homeData = this.right_data;
            this.right_data.forEach((item) => {
                item.foods.forEach((v) => {
                    if (v.count >= 1) {
                        list.push(v);
                    }
                });
            });
            console.log(this.popupbtn);
            if (this.popupbtn) {
                type = 1;
                data = {
                    total: this.total,
                    totalPrice: this.totalPrice,
                    list: list,
                    orderId: this.popupData.orderId,
                    orderMark: this.popupData.orderMark,
                };
            } else {
                //把选好的菜保存在vuex中，用于确定订单返回加菜
                this.$store.state.homeData = this.right_data;
                this.$store.state.homeLeftData = this.left_data;
                type = 2;
                data = {
                    total: this.total,
                    totalPrice: this.totalPrice,
                    list: list,
                };
            }
            if (this.total) {
                data = JSON.stringify(data);
                this.$router.push({
                    name: "ConfirmOrder",
                    params: {
                        data: data,
                        type: type,
                    },
                });
            } else {
                // console.log("购物车为空!");
                Toast({
                    message: "购物车为空!",
                    position: "bottom",
                });
            }
        },
        //左侧点击
        goScroll(i) {
            // this.currentIndex = i;
            this.rightBScroll.scrollTo(0, -this.allHeight[i], 500);
        },
        // 规格点击
        changeIndex(value, index, item) {
            // console.log(value,item,index);
            console.log(item);
            // this.pIndex = index
            item.newSpecs.forEach((v, i) => {
                console.log(v);
                v.active = false;
            });
            value.active = !value.active;
        },
        // 获取数据
        getData() {
            http.get("/tophappiness/sell/buyer/product/list").then((data) => {
                console.log(data);
                let list = [];
                data.data.forEach((item) => {
                    console.log(item.name.indexOf("·"));
                    if (item.name.indexOf("·") == 2) {
                        this.left_data.push({
                            title: item.name.split("·")[0] + "·",
                            subtitle: item.name.split("·")[1],
                        });
                    } else {
                        this.left_data.push({
                            title: item.name,
                        });
                    }

                    item.foods.forEach((v, i, arr) => {
                        v.count = 0;
                    });
                    list.push(item);
                });
                this.right_data = list;
                this.$store.state.homeLeftData = this.left_data;

                console.log(this.right_data);
            });
        },
        initSrcoll() {
            this.leftBScroll = new BScroll(this.$refs.l_list, {
                click: true,
                probeType: 3,
            });
            this.rightBScroll = new BScroll(this.$refs.r_list, {
                click: true,
                probeType: 3,
            });

            //滚动距离
            this.rightBScroll.on("scroll", (pos) => {
                this.scrollY = Math.abs(Math.round(pos.y));
            });

            let uls = "";
            uls = this.$refs.r_list.getElementsByClassName("classify-r-list");
            let height = 0;
            // 右侧高度集合
            this.allHeight.push(height);
            Array.from(uls).forEach((v) => {
                height += v.clientHeight;
                this.allHeight.push(height);
            });
            // console.log(this.allHeight);
        },
    },
    watch: {
        right_data() {
            this.$nextTick(() => {
                this.initSrcoll();
            });
        },
        total() {
            this.totalPost();
        },
    },
    computed: {
        // 滚动联动左侧
        currentIndex() {
            return this.allHeight.findIndex((item, index) => {
                return (
                    this.scrollY >= item &&
                    this.scrollY < this.allHeight[index + 1]
                );
            });
        },
        // 计算总量
        total() {
            let total = 0;
            for (let i = 0; i < this.right_data.length; i++) {
                this.right_data[i].foods.forEach((item) => {
                    total += parseInt(item.count);
                });
            }
            return total;
        },
        // 计算总价格
        // totalPrice() {
        //     let totalPrice = 0;
        //     for (let i = 0; i < this.right_data.length; i++) {
        //         this.right_data[i].foods.forEach((item) => {
        //             totalPrice += parseInt(item.price) * parseInt(item.count);
        //         });
        //     }
        //     return totalPrice.toFixed(2);
        // },
        cartData() {
            let data = [];
            for (let i = 0; i < this.right_data.length; i++) {
                this.right_data[i].foods.forEach((item) => {
                    if (item.count > 0) {
                        data.push(item);
                    }
                });
            }
            return data;
        },
    },
    mounted() {},
    created() {
        // if (this.$route.params.homeData) {
        //     this.left_data = this.$store.state.homeLeftData;
        //     this.right_data = JSON.parse(this.$route.params.homeData);
        // }
        //  else {
        //     //使用动态数据
        //     this.getData();
        // }
        if (this.$store.state.homeData.length > 0) {
            this.left_data = this.$store.state.homeLeftData;
            this.right_data = this.$store.state.homeData;
        } else {
            this.getData();
        }
        if (JSON.stringify(this.$store.state.orderData) == "{}") {
            console.log("为空");
            this.popupbtn = false;
        } else {
            this.popupbtn = true;
            console.log(this.$store.state.orderData);
            this.popupData = this.$store.state.orderData;
        }
        // 使用静态数据
        // let list = [];
        // data.forEach((item) => {
        //     this.left_data.push({
        //         title: item.name.split("·")[0] + "·",
        //         subtitle: item.name.split("·")[1],
        //     });
        //     item.foods.forEach((v, i, arr) => {
        //         v.count = 0;
        //     });
        //     list.push(item);
        // });
        // this.right_data = list;
    },
};
</script>
<style lang="less" scoped>
@import "../assets/css/font.css";
.home {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .my-shop {
        height: 200px;
        background: @bg-m;
        box-sizing: border-box;
        position: relative;
        &::before {
            content: "福";
            width: 70%;
            height: 200px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 150px;
            font-family: ziti;
            display: flex;
            align-items: center;
            justify-content: center;
            color: antiquewhite;
            z-index: 1;
            overflow: hidden;
        }
        .my-head {
            position: relative;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 2;
            .my-order {
                min-width: 100px;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: @pd-5 @pd-10;
                background: rgba(0, 0, 0, 0.3);
                border-radius: @bd-30;
                .fa-icon {
                    font-size: @fs-18;
                    color: #fff;
                }
                .my-order-btn {
                    font-size: @fs-16;
                    color: #fff;
                    margin-left: @pd-10;
                }
            }
            .shop-logo {
                width: 98px;
                height: 98px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .shop-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 @pd-20 @pd-20;
            position: relative;
            z-index: 2;
            .shop-info-l {
                .title {
                    font-size: @fs-28;
                    color: #000;
                }
            }
            .shop-info-r {
                .table {
                    font-size: @fs-28;
                    color: #000;
                }
            }
        }
    }
    .classify {
        width: 100%;
        height: calc(100vh - 200px);
        overflow: hidden;
        box-sizing: border-box;
        .classify-content {
            width: 100%;
            display: flex;
            height: calc(100% - 80px);
            overflow: hidden;
            box-sizing: border-box;
            .classify-l {
                width: 120px;
                height: 100%;
                text-align: center;
                background: #f6f6f6;
                ul {
                    li {
                        font-size: @fs-18;
                        padding: @pd-20 0;
                        color: @c-m;
                        font-weight: bold;
                        span {
                            font-family: ziti;
                            font-size: 24px;
                        }
                    }
                    .active {
                        background: #fff;
                    }
                }
            }
            .classify-r {
                flex: 1;
                height: 100%;
                ul {
                    .classify-r-list {
                        padding: 0 @pd-20;
                        padding-bottom: 10px;

                        .shop-title {
                            font-size: @fs-16;
                            padding: @pd-20 0;
                        }
                        .shop-info {
                            width: 100%;
                            display: flex;
                            padding-bottom: @pd-10;

                            &:last-child {
                                padding-bottom: 0;
                            }
                            .shop-info-l {
                                width: 89px;
                                height: 89px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    border-radius: @bd-5;
                                }
                            }
                            .shop-info-r {
                                flex: 1;
                                margin-left: @pd-10;

                                .shop-info-r-name {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    p {
                                        flex: 1;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        font-size: @fs-18;
                                        color: #000;
                                    }
                                    span {
                                        padding: 0 5px;
                                        font-size: 12px;
                                        color: #fff;
                                        font-weight: bold;
                                        background: @c-m;
                                        border-radius: 10px;
                                    }
                                    .activeGreen {
                                        background: @bg-l;
                                    }
                                    .activeGrey {
                                        background: @bg-grey;
                                    }
                                }
                                .shop-info-r-price {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    margin-top: @pd-10;
                                    .shop-price {
                                        font-size: @fs-16;
                                        font-weight: bold;
                                        color: @c-h;
                                    }
                                    .price-btn {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-around;
                                        .plus-btn {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            font-size: @fs-24;
                                            color: @c-h;
                                        }
                                        .huise {
                                            color: #ccc;
                                        }
                                        .price-content {
                                            min-width: 30px;
                                            font-size: @fs-20;
                                            text-align: center;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .my-cart {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        box-sizing: border-box;
        z-index: 2;
        .my-cart-bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .shop-info {
            position: absolute;
            bottom: 80px;
            left: 0;
            width: 100%;
            max-height: 50vh;
            padding: 20px;
            background: #fff;
            border-radius: 20px 20px 0px 0;
            box-sizing: border-box;
            overflow-y: scroll;
            .shop-content {
                display: flex;
                padding: 10px 0;
                .shop-info-l {
                    width: 89px;
                    height: 89px;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: @bd-5;
                    }
                }
                .shop-info-r {
                    flex: 1;
                    margin-left: @pd-10;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .shop-info-r-name {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        p {
                            flex: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: @fs-18;
                            color: #000;
                        }
                        span {
                            padding: 0 5px;
                            font-size: 12px;
                            color: #fff;
                            font-weight: bold;
                            background: @c-m;
                            border-radius: 10px;
                        }
                        .activeGreen {
                            background: @bg-l;
                        }
                        .activeGrey {
                            background: @bg-grey;
                        }
                    }
                    .shop-info-r-price {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: @pd-10;
                        .shop-price {
                            font-size: @fs-16;
                            font-weight: bold;
                            color: @c-h;
                        }
                        .price-btn {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            .plus-btn {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: @fs-24;
                                color: @c-h;
                            }
                            .huise {
                                color: #ccc;
                            }
                            .price-content {
                                min-width: 30px;
                                font-size: @fs-20;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
    .total {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 0 @pd-20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
        // box-shadow: 0 0 6px 2px @bg-h;
        z-index: 3;
        .total-l {
            display: flex;
            align-items: center;
            .cart {
                width: 58px;
                height: 58px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                background: #eee;
                border-radius: @bd-10;
                .cart-icon {
                    font-size: @fs-28;
                    color: @c-h;
                }
                .tip {
                    width: 16px;
                    height: 16px;
                    padding: 3px;
                    display: flex;
                    font-size: @fs-14;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: -6px;
                    right: -6px;
                    color: #fff;
                    border-radius: 50%;
                    background: @c-m;
                }
            }
            .total-info {
                display: flex;
                align-items: flex-end;
                margin-left: @pd-20;
                .total-t {
                    font-size: @fs-16;
                    color: #000;
                }
                .total-price {
                    font-size: @fs-24;
                    color: #000;
                    font-weight: bold;
                }
            }
        }
        .total-r {
            button {
                font-size: @fs-18;
                color: #fff;
                padding: @pd-10 @pd-30;
                border-radius: @bd-10;
                background: @c-h;
            }
        }
    }
    .popupbtn {
        width: 20px;
        height: 20px;
        position: fixed;
        right: 10px;
        bottom: 20vh;
        padding: 20px;
        font-size: 20px;
        color: @c-h;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: @bg-m;
    }
}
</style>
